---
import { Code } from "astro:components";
import kdl from "../../../kdl.tmLanguage.json";
---

<section id="configuration" class="py-20">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple configuration</h2>
      <p class="text-muted-foreground text-lg max-w-2xl mx-auto">
        Ferron has simple, intuitive configuration, compared to more complex
        configurations of some popular web servers.
      </p>
    </div>
    <div class="mx-auto max-w-screen-xl">
      <div class="flex border-b mb-6 overflow-x-auto whitespace-nowrap">
        <button
          data-configuration-static-tab
          class="px-4 py-2 font-medium cursor-pointer transition-colors hover:text-accent"
          >Static file serving</button
        >
        <button
          data-configuration-proxy-tab
          class="px-4 py-2 font-medium cursor-pointer transition-colors hover:text-accent"
          >Reverse proxying</button
        >
        <button
          data-configuration-php-tab
          class="px-4 py-2 font-medium cursor-pointer transition-colors hover:text-accent"
          >PHP hosting</button
        >
      </div>
      <div data-configuration-static-content>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h3 class="text-lg font-semibold mb-3">
              Popular web server (NGINX host configuration)
            </h3>
            <Code
              code={`server {
    listen 80;
    listen 443 ssl http2;

    server_name example.com;
    server_tokens off;

    # Assuming you use Certbot for automatic certificate management
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    root /var/www/html;
    gzip on;

    location / {
        try_files $uri $uri/ =404;
    }
}`}
              lang="nginx"
              themes={{
                light: "catppuccin-latte",
                dark: "catppuccin-mocha"
              }}
              defaultColor={false}
              class="p-4 rounded-lg text-sm md:text-base"
            />
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-3">Ferron 2.x</h3>
            <Code
              code={`// TLS certificate is obtained automatically by Ferron
example.com {
    root "/var/www/html"
}`}
              lang={kdl}
              themes={{
                light: "catppuccin-latte",
                dark: "catppuccin-mocha"
              }}
              defaultColor={false}
              class="p-4 rounded-lg text-sm md:text-base"
            />
          </div>
        </div>
      </div>
      <div data-configuration-proxy-content>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h3 class="text-lg font-semibold mb-3">
              Popular web server (NGINX host configuration)
            </h3>
            <Code
              code={`upstream backend {
    server localhost:3000;
    keepalive 32;
}

server {
    listen 80;
    listen 443 ssl http2;

    server_name example.com;
    server_tokens off;

    # Assuming you use Certbot for automatic certificate management
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    location / {
        proxy_pass http://backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}`}
              lang="nginx"
              themes={{
                light: "catppuccin-latte",
                dark: "catppuccin-mocha"
              }}
              defaultColor={false}
              class="p-4 rounded-lg text-sm md:text-base"
            />
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-3">Ferron 2.x</h3>
            <Code
              code={`// TLS certificate is obtained automatically by Ferron
example.com {
    proxy "http://localhost:3000"
}`}
              lang={kdl}
              themes={{
                light: "catppuccin-latte",
                dark: "catppuccin-mocha"
              }}
              defaultColor={false}
              class="p-4 rounded-lg text-sm md:text-base"
            />
          </div>
        </div>
      </div>
      <div data-configuration-php-content>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h3 class="text-lg font-semibold mb-3">
              Popular web server (NGINX host configuration)
            </h3>
            <Code
              code={`server {
    listen 80;
    listen 443 ssl http2;

    server_name example.com;
    server_tokens off;

    # Assuming you use Certbot for automatic certificate management
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    root /var/www/html;
    index index.php index.html index.htm;

    location / {
        gzip on;
        try_files $uri $uri/ =404;
    }

    location ~ \\.php$ {
        fastcgi_split_path_info ^(.+\\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php/php-fpm.sock;
        set $path_info $fastcgi_path_info;
        fastcgi_param PATH_INFO $path_info;
        fastcgi_index index.php;
        # The "fastcgi.conf" is located in the NGINX configuration directory (at least on Debian-based systems)
        include fastcgi.conf;
    }
}`}
              lang="nginx"
              themes={{
                light: "catppuccin-latte",
                dark: "catppuccin-mocha"
              }}
              defaultColor={false}
              class="p-4 rounded-lg text-sm md:text-base"
            />
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-3">Ferron 2.x</h3>
            <Code
              code={`// TLS certificate is obtained automatically by Ferron
example.com {
    root "/var/www/html"
    // Check if the PHP-FPM socket file is accessible by the web server user, often "ferron"
    fcgi_php "unix:///var/run/php/php-fpm.sock"
}`}
              lang={kdl}
              themes={{
                light: "catppuccin-latte",
                dark: "catppuccin-mocha"
              }}
              defaultColor={false}
              class="p-4 rounded-lg text-sm md:text-base"
            />
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function initializeTabs() {
      const staticTab = document.querySelector(
        "[data-configuration-static-tab]"
      );
      const proxyTab = document.querySelector("[data-configuration-proxy-tab]");
      const phpTab = document.querySelector("[data-configuration-php-tab]");
      const staticContent = document.querySelector(
        "[data-configuration-static-content]"
      );
      const proxyContent = document.querySelector(
        "[data-configuration-proxy-content]"
      );
      const phpContent = document.querySelector(
        "[data-configuration-php-content]"
      );

      if (staticTab) {
        staticTab.addEventListener("click", () => {
          staticTab.classList.add(
            "text-primary",
            "border-b-2",
            "border-primary"
          );
          if (proxyTab)
            proxyTab.classList.remove(
              "text-primary",
              "border-b-2",
              "border-primary"
            );
          if (phpTab)
            phpTab.classList.remove(
              "text-primary",
              "border-b-2",
              "border-primary"
            );
          if (staticContent) staticContent.classList.remove("hidden");
          if (proxyContent) proxyContent.classList.add("hidden");
          if (phpContent) phpContent.classList.add("hidden");
        });
      }

      if (proxyTab) {
        proxyTab.addEventListener("click", () => {
          proxyTab.classList.add(
            "text-primary",
            "border-b-2",
            "border-primary"
          );
          if (staticTab)
            staticTab.classList.remove(
              "text-primary",
              "border-b-2",
              "border-primary"
            );
          if (phpTab)
            phpTab.classList.remove(
              "text-primary",
              "border-b-2",
              "border-primary"
            );
          if (proxyContent) proxyContent.classList.remove("hidden");
          if (staticContent) staticContent.classList.add("hidden");
          if (phpContent) phpContent.classList.add("hidden");
        });
      }

      if (phpTab) {
        phpTab.addEventListener("click", () => {
          phpTab.classList.add("text-primary", "border-b-2", "border-primary");
          if (staticTab)
            staticTab.classList.remove(
              "text-primary",
              "border-b-2",
              "border-primary"
            );
          if (proxyTab)
            proxyTab.classList.remove(
              "text-primary",
              "border-b-2",
              "border-primary"
            );
          if (phpContent) phpContent.classList.remove("hidden");
          if (staticContent) staticContent.classList.add("hidden");
          if (proxyContent) proxyContent.classList.add("hidden");
        });
      }

      if (staticTab)
        staticTab.classList.add("text-primary", "border-b-2", "border-primary");
      if (proxyTab)
        proxyTab.classList.remove(
          "text-primary",
          "border-b-2",
          "border-primary"
        );
      if (phpTab)
        phpTab.classList.remove("text-primary", "border-b-2", "border-primary");
      if (staticContent) staticContent.classList.remove("hidden");
      if (proxyContent) proxyContent.classList.add("hidden");
      if (phpContent) phpContent.classList.add("hidden");
    }

    initializeTabs();
    document.addEventListener("astro:after-swap", initializeTabs);
  </script>
</section>
